<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>socio-music</title>
        <script src="jquery-1.9.0.min.js"></script>
        <!--<script src="audiojs/audio.min.js"></script>-->
        <script type="text/javascript">
        $(document).ready(function(){
        //    audiojs.events.ready(function() {
        //            var as = audiojs.createAll();
        //              });
            var files = null;
            var fileObjs = new Array();
            document.querySelector('#dir-select').onchange = function(e) {
       // debugger;
       // var out = [];
        for (var i = 0, f; f = e.target.files[i]; ++i) {
            var span = document.createElement('span');
                span.setAttribute("class", "active");
            span.innerHTML = '<a class="thumb" id="'+'fil'+i+'">'+f.name +'</a>';
            document.getElementById('list').insertBefore(span, null);
            fileObjs[i]= {};
            //fileObjs[i].file = f;
            fileObjs[i].duri = window.webkitURL.createObjectURL(f);
            //out.push(f.webkitRelativePath);
        }
        $("#player").html('<audio id="song" src="" controls preload="auto"  > </audio><br/ >');
    };
    $(document).on('click','.thumb',function(){
        var idNum = parseInt($(this).attr('id').split('fil')[1]);
       playSong(idNum);
    });

    var playSong = function(num){
        var sng = fileObjs[num].duri;
             $("#song").attr('src',sng);
             var currentSong = $("#song")[0];
             song.play();
             song.addEventListener('ended',function(){
             $('#fil'+num).closest('span').removeClass('playing');
                playSong(num+1);
             });
             $('#fil'+num).closest('span').addClass('playing');
    };
        });
        </script>
        <style type="text/css">
span{display:block;
        width:80%;
        padding:3px;
        margin:2px;
        border:1px gray dashed;
        background: #eee;
        color:#bbb;
    }
    span:hover{
        background: #888;
        color:#aaa;
        cursor:pointer;
    }
    span.active {
        color:#111;
    }
    span.playing{
        font-weight:bold;
    }
    span.active:hover {
        color:#ddd;
    }
    a.off = {
        width:20px;
        padding:4px;
        background:gray;
        color:#fff;
    }
        </style>
    </head>
    <body>
        <div id="player"></div>
        <output id="list"></output>
        <input type="file" id="dir-select" webkitdirectory="" />
    </body>
</html>
